import React from 'react'
import { View, StyleSheet } from 'react-native'
import PropTypes from 'prop-types'

const TRIANGLE_DIRECTION = {
  UP: 'up',
  DOWN: 'down'
}
export default function TriangleView (props) {
  const { direction, color, width } = props
  let style = {
    width: 0,
    height: 0
  }
  switch (direction) {
    case TRIANGLE_DIRECTION.UP:
      style = {
        ...style,
        borderLeftColor: 'transparent',
        borderRightColor: 'transparent'
      }
      style.borderBottomColor = color
      style.borderBottomWidth = width
      style.borderLeftWidth = width / 2
      style.borderRightWidth = width / 2
      break
    case TRIANGLE_DIRECTION.DOWN:
      style = {
        ...style,
        borderLeftColor: 'transparent',
        borderRightColor: 'transparent'
      }
      style.borderTopColor = color
      style.borderTopWidth = width
      style.borderLeftWidth = width / 2
      style.borderRightWidth = width / 2
      break
  }
  return <View style={style}/>
}
TriangleView.propTypes = {
  direction: PropTypes.string,
  color: PropTypes.string,
  width: PropTypes.number
}
TriangleView.defaultProps = {
  direction: TRIANGLE_DIRECTION.UP
}

const styles = StyleSheet.create({
  triangleView: {
    flex: 1
  },
  triangle_UP: {
    width: 0,
    height: 0,
    borderLeftWidth: 50,
    borderLeftColor: 'transparent',
    borderRightWidth: 50,
    borderRightColor: 'transparent',
    borderBottomWidth: 100,
    borderBottomColor: 'red'
  },
  triangle_down: {
    width: 0,
    height: 0,
    borderLeftWidth: 50,
    borderLeftColor: 'transparent',
    borderRightWidth: 50,
    borderRightColor: 'transparent',
    borderTopWidth: 100,
    borderTopColor: 'red'
  },
  triangle_left: {
    width: 0,
    height: 0,
    borderTopWidth: 50,
    borderTopColor: 'transparent',
    borderRightWidth: 100,
    borderRightColor: 'red',
    borderBottomWidth: 50,
    borderBottomColor: 'transparent'
  },
  triangle_right: {
    marginTop: 20,
    width: 0,
    height: 0,
    borderTopWidth: 50,
    borderTopColor: 'transparent',
    borderLeftWidth: 100,
    borderLeftColor: 'red',
    borderBottomWidth: 50,
    borderBottomColor: 'transparent'
  },
  triangle_top_right: {
    marginTop: 20,
    width: 0,
    height: 0,
    borderLeftWidth: 100,
    borderLeftColor: 'transparent',
    borderTopWidth: 100,
    borderTopColor: 'red'
  },
  triangle_bottom_left: {
    marginTop: 20,
    width: 0,
    height: 0,
    borderRightWidth: 100,
    borderRightColor: 'transparent',
    borderBottomWidth: 100,
    borderBottomColor: 'red'
  },
  triangle_bottom_right: {
    marginTop: 20,
    width: 0,
    height: 0,
    borderLeftWidth: 100,
    borderLeftColor: 'transparent',
    borderBottomWidth: 100,
    borderBottomColor: 'red'
  },
  triangle_f: {
    marginTop: 20,
    width: 0,
    height: 0,
    borderTopWidth: 100,
    borderTopColor: 'red',
    borderRightWidth: 100,
    borderRightColor: 'transparent'

  }
})
